<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login" :style="loginStyle">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form ref="loginForm" @on-success-valid="handleSubmit" :loginBtn="loginBtn"></login-form>
          <!-- <p class="login-tip">输入任意用户名和密码即可</p> -->
          <!--
          <other-login></other-login>
          -->
        </div>
      </Card>
    </div>
    <div class="login-bottom">
      <span style="margin-right: 10px;">
      © {{keepOnRecord.date}} {{keepOnRecord.doMain}} 版权所有
      </span>
      ICP证：<a href="http://www.beian.miit.gov.cn" target="_blank">{{keepOnRecord.icp}}</a>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import OtherLogin from '_c/other-login'
import { mapActions, mapState, mapGetters } from 'vuex'
import config from '@/config'
import * as ResponseStatus from '@/api/response-status'
import {hasOneOf} from '@/libs/tools'
import { getSysInfo, SYS_INFO_KEY, localStorage, doGet } from '@/api/utils-v2.js'
import backgroundImg from '@/assets/images/login-bg.jpg'
export default {
  components: {
    LoginForm,
    OtherLogin
  },
  data () {
    return {
      loginForm: {
        'username': '',
        'password': '',
        'verifyCode': ''
      },
      loginBtn: false,
      loginStyle: {
        'background-image': 'url(' + backgroundImg + ')'
      },
      keepOnRecord: config.keepOnRecord
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserRoles',
      'getUserInfo',
      'clearTokenAndAccess'
    ]),
    handleSubmit ({ username, password, verifyCode }) {
      this.loginForm.username = username
      this.loginForm.password = password
      this.loginForm.verifyCode = verifyCode
      this.loginBtn = true
      this.handleLogin(this).then(res => {
        this.loginBtn = false
        if (res.data.code === ResponseStatus.OK) {
          // 登入成功获取用户角色
          this.getUserRoles(this).then(res => {
            if (res.length > 0) {
              doGet('/role/any/backend-roles', {}).then(response => {
                if (response.data.code === ResponseStatus.OK) {
                  if (response.data.data.total <= 0) {
                    this.$Message.warning('没有配置可访问后台的角色，无法登录后台')
                    this.clearTokenAndAccess()
                    return
                  }
                  let roles = []
                  response.data.data.rows.forEach(row => {
                    roles.push(row.title)
                  })
                  if (hasOneOf(roles, res)) {
                    this.getUserInfo().then(res => {
                      // 成功获取用户信息，清除tab菜单并进入首页
                      if (window.localStorage) {
                        window.localStorage.removeItem('tagNaveList')
                      }
                      this.$router.push({
                        name: this.$config.homeName
                      })
                      window.location.reload()
                    })
                  } else {
                    this.$Message.error('没有后台访问权限，禁止访问')
                    this.clearTokenAndAccess()
                  }
                } else {
                  this.$Message.error(response.data.message)
                  this.clearTokenAndAccess()
                }
              }).catch(error => {
                this.$Message.error('无法获取可访问后台的角色')
                this.clearTokenAndAccess()
              })
            }
          })
        } else {
          this.$refs.loginForm.refreshVerifyCode()
          this.clearTokenAndAccess()
        }
      })
    },
    notice() {
      if (config.showDemoAccount) {
        this.$Notice.info({
          title: '体验账号密码',
          desc: '账号：demo@zywork.top 密码：Demo123456',
          duration: 10
        })
      }
    }
  },
  mounted() {
    this.notice()
    if (localStorage) {
      var sysInfo = localStorage.getItem(SYS_INFO_KEY)
      if (sysInfo) {
        sysInfo = JSON.parse(sysInfo)
        if (sysInfo.loginBackImg) {
          this.loginStyle = {
            'background-image': 'url(' + sysInfo.loginBackImg + ')'
          }
        }
      } else {
        getSysInfo(this)
      }
      
    }
  }
}
</script>

<style>

</style>
